import React from 'react';
import {View, StyleSheet, TextInput, Text} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';

const styles = StyleSheet.create({
  searchSection: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
    marginTop: 80,
  },
  searchIcon: {
    padding: 10,
  },
  input: {
    flex: 1,
    paddingTop: 10,
    paddingRight: 10,
    paddingBottom: 10,
    paddingLeft: 0,
    backgroundColor: '#fff',
    color: '#424242',
    borderBlockColor: 'red',
    borderWidth: 1,
    marginRight: 10,
  },
  passwordContainer: {
    flexDirection: 'row',
    borderBottomWidth: 1,
    borderColor: '#000',
    paddingBottom: 10,
  },
});
// https://segmentfault.com/q/1010000042964503
const Login = () => {
  return (
    <>
      <View>
        <View style={styles.searchSection}>
          <Icon
            style={styles.searchIcon}
            name="search"
            size={20}
            color="#000"
          />
          <TextInput
            editable={true}
            style={styles.input}
            placeholder="User Nickname"
            onChangeText={searchString => {
              this.setState({searchString});
            }}
          />
        </View>
      </View>
      <Text>{'abcdef'}</Text>

      <View>
        <View style={styles.passwordContainer}>
          <TextInput
            editable={true}
            style={styles.input}
            autoCorrect={false}
            secureTextEntry
            placeholder="Password"
            value={''}
            onChangeText={this.onPasswordEntry}
          />
          <Icon name="what_ever_icon_you_want" color="#000" size={14} />
        </View>
      </View>
    </>
  );
};

export default Login;
